<template>
    <!-- <div>
店铺
    </div> -->
    <panel title="店铺管理">
        <el-button slot="btn" @click="submit">保存</el-button>
        <el-form label-width="80px">
            <el-form-item label="店铺名称">
                <el-input v-model="from.name"></el-input>
            </el-form-item>
            <el-form-item label="店铺公告">
                <el-input type="textarea" v-model="from.bulletin"></el-input>
            </el-form-item>
            <el-form-item label="店铺头像">
                <el-upload :action="BASE_URL + '/shop/upload'" :on-success="avatarSuccess">
                    <img :src="BASE_URL + '/upload/shop/' + from.avatar" alt="">
                </el-upload>
            </el-form-item>
            <el-form-item label="店铺图片">

                <div class="img-item" v-for="(item, i) in from.pics" :key="item">
                    <span class="close" @click="removeimg(i)">x</span>
                    <img :src="BASE_URL + '/upload/shop/' + item" alt="" srcset="">
                </div>
                <el-upload :action="BASE_URL + '/shop/upload'" :on-success="picSuccess">
                    <i style="font-size: 50px" class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>

            </el-form-item>
            <el-form-item label="配送费">

                <el-input v-model="from.deliveryPrice" controls-position="right" :min="1" placeholder="请输入内容"
                    type="number"></el-input>
            </el-form-item>
            <el-form-item label="配送时间">
                <el-input autosize placeholder="请输入内容" v-model="from.deliveryTime" type="number">
                </el-input>
            </el-form-item>
            <el-form-item label="配送描述">
                <el-input autosize placeholder="请输入内容" v-model="from.description">
                </el-input>
            </el-form-item>
            <el-form-item label="配送价格">
                <el-input autosize placeholder="请输入内容" v-model="from.minPrice" type="number">
                </el-input>
            </el-form-item>
            <el-form-item label="店铺评分">
                <el-input autosize placeholder="请输入内容" v-model="from.score" type="number">
                </el-input>
            </el-form-item>
            <el-form-item label="销量">
                <el-input autosize placeholder="请输入内容" v-model="from.sellCount" type="number">
                </el-input>
            </el-form-item>
            <el-form-item label="活动">
                <el-checkbox-group v-model="from.supports">
                    <el-checkbox v-for="item in list" :key="item" :label="item"></el-checkbox>
                </el-checkbox-group>
            </el-form-item>
            <el-form-item label="营业时间">
                <el-time-picker is-range v-model="from.date" range-separator="至" start-placeholder="开始时间"
                    end-placeholder="结束时间" placeholder="选择时间范围">
                </el-time-picker>
            </el-form-item>

        </el-form>
    </panel>
</template>

<script>
import { BASE_URL } from '@/utils/common';
import { shopinfoReq, shopeditReq } from '@/api/account.api'
export default {
    data() {
        return {
            BASE_URL,
            from: {
                // textarea1
                supports: []
            },
            list: ["单人精彩套餐", "VC无限橙果汁全场8折", "情人特价"]
        }
    },
    methods: {
        removeimg(i) {
            this.from.pics.splice(i, 1)
        },
        submit() {
            const data = { ...this.from }
            shopeditReq(data).then((res) => {
                console.log(res);
                if (res.data.code == 0) {
                    this.$message({
                        message: '修改成功',
                        type: 'success',

                    });
                }
            })
        },
        avatarSuccess(res) {
            // console.log()
            this.from.avatar = res.imgUrl.split('/').pop()
        },
        picSuccess(res) {
            this.from.pics.push(res.imgUrl.split('/').pop())
        },
    },
    created() {
        shopinfoReq().then((res) => {
            console.log(res.data.data);
            this.from = res.data.data
        })
    }
}
</script>

<style lang="less" scoped>
.img-item {
    display: inline-block;
    position: relative;

    .close {
        color: red;
        font-size: 24px;
        position: absolute;
        top: -10px;
        right: 3px;
        display: none;
    }

    &:hover .close {
        display: inline;
    }
}

.el-input {
    width: 300px;
}

.el-input-number {
    width: 300px;
}

.el-textarea {
    width: 350px;
}

.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
}
</style>